﻿<!DOCTYPE html>
<html>
  <head>
    <title>输入框搜索框软键盘</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <link href="resources/css/jquery-ui-themes.css" type="text/css" rel="stylesheet"/>
    <link href="resources/css/axure_rp_page.css" type="text/css" rel="stylesheet"/>
    <link href="data/styles.css" type="text/css" rel="stylesheet"/>
    <link href="files/输入框搜索框软键盘/styles.css" type="text/css" rel="stylesheet"/>
    <script src="resources/scripts/jquery-1.7.1.min.js"></script>
    <script src="resources/scripts/jquery-ui-1.8.10.custom.min.js"></script>
    <script src="resources/scripts/prototypePre.js"></script>
    <script src="data/document.js"></script>
    <script src="resources/scripts/prototypePost.js"></script>
    <script src="files/输入框搜索框软键盘/data.js"></script>
    <script type="text/javascript">
      $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };
      $axure.utils.getOtherPath = function() { return 'resources/Other.html'; };
      $axure.utils.getReloadPath = function() { return 'resources/reload.html'; };
    </script>
  </head>
  <body>
    <div id="base" class="">

      <!-- Unnamed (组 合) -->
      <div id="u31" class="ax_default" data-left="20" data-top="0" data-width="335" data-height="385">

        <!-- Unnamed (图片) -->
        <div id="u32" class="ax_default image">
          <img id="u32_img" class="img " src="images/输入框搜索框软键盘/u32.png"/>
        </div>

        <!-- Unnamed (矩形) -->
        <div id="u33" class="ax_default box_21">
          <div id="u33_div" class=""></div>
          <div id="u33_text" class="text ">
            <p><span>获取焦点空状态</span></p>
          </div>
        </div>

        <!-- Unnamed (图片) -->
        <div id="u34" class="ax_default image">
          <img id="u34_img" class="img " src="images/输入框搜索框软键盘/u34.png"/>
        </div>

        <!-- Unnamed (矩形) -->
        <div id="u35" class="ax_default box_21">
          <div id="u35_div" class=""></div>
          <div id="u35_text" class="text ">
            <p><span>获取焦点且不为空状态</span></p>
          </div>
        </div>

        <!-- Unnamed (图片) -->
        <div id="u36" class="ax_default image">
          <img id="u36_img" class="img " src="images/输入框搜索框软键盘/u36.png"/>
        </div>

        <!-- Unnamed (图片) -->
        <div id="u37" class="ax_default image">
          <img id="u37_img" class="img " src="images/输入框搜索框软键盘/u37.png"/>
        </div>

        <!-- Unnamed (矩形) -->
        <div id="u38" class="ax_default box_21">
          <div id="u38_div" class=""></div>
          <div id="u38_text" class="text ">
            <p><span>初始空状态（未获取焦点空状态）</span></p>
          </div>
        </div>

        <!-- Unnamed (矩形) -->
        <div id="u39" class="ax_default box_21">
          <div id="u39_div" class=""></div>
          <div id="u39_text" class="text ">
            <p><span>输入完成失去焦点状态</span></p>
          </div>
        </div>

        <!-- Unnamed (矩形) -->
        <div id="u40" class="ax_default box_21">
          <div id="u40_div" class=""></div>
          <div id="u40_text" class="text ">
            <p><span>输入框</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u41" class="ax_default _文本段落">
        <div id="u41_div" class=""></div>
        <div id="u41_text" class="text ">
          <p><span>【输入框】</span></p><p><span>&#149; 点击输入框区域，获取焦点。获取焦点时，显示软键盘</span></p><p><span>&#149; 点击表单和软键盘外其他区域，失去焦点。失去焦点时，关闭软键盘</span></p><p><span>&#149; 输入框获取焦点且有字符时，显示“清空”按钮。点击“清空”，当前输入框字符清空，获取焦点状态不变</span></p><p><span>&#149; 输入框字符超过输入框长度时，以最右为基准显示，左侧超出字符隐藏</span></p>
        </div>
      </div>

      <!-- Unnamed (图片) -->
      <div id="u42" class="ax_default image">
        <img id="u42_img" class="img " src="images/输入框搜索框软键盘/u42.png"/>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u43" class="ax_default box_21">
        <div id="u43_div" class=""></div>
        <div id="u43_text" class="text ">
          <p><span>软键盘</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u44" class="ax_default _文本段落">
        <div id="u44_div" class=""></div>
        <div id="u44_text" class="text ">
          <p><span>【软键盘】</span></p><p><span>&#149; 输入框获取焦点时，显示软键盘；失去焦点时，关闭软键盘</span></p><p><span>&#149; 软键盘高度不遮挡表单中“提交”按钮。</span></p><p><span>&#149; 软键盘需要有拼音、英文、大小写、数字标点</span></p><p><span>&#149; 软键盘中return键切换聚焦到下一输入框，最后一个输入框时，return键相当于提交表单操作。</span></p>
        </div>
      </div>

      <!-- Unnamed (组 合) -->
      <div id="u45" class="ax_default" data-left="20" data-top="605" data-width="384" data-height="498">

        <!-- Unnamed (图片) -->
        <div id="u46" class="ax_default image">
          <img id="u46_img" class="img " src="images/输入框搜索框软键盘/u46.png"/>
        </div>

        <!-- Unnamed (矩形) -->
        <div id="u47" class="ax_default box_21">
          <div id="u47_div" class=""></div>
          <div id="u47_text" class="text ">
            <p><span>搜索框</span></p>
          </div>
        </div>

        <!-- Unnamed (矩形) -->
        <div id="u48" class="ax_default box_21">
          <div id="u48_div" class=""></div>
          <div id="u48_text" class="text ">
            <p><span>初始状态</span></p>
          </div>
        </div>

        <!-- Unnamed (矩形) -->
        <div id="u49" class="ax_default box_21">
          <div id="u49_div" class=""></div>
          <div id="u49_text" class="text ">
            <p><span>获取焦点空状态</span></p>
          </div>
        </div>

        <!-- Unnamed (图片) -->
        <div id="u50" class="ax_default image">
          <img id="u50_img" class="img " src="images/输入框搜索框软键盘/u50.png"/>
        </div>

        <!-- Unnamed (图片) -->
        <div id="u51" class="ax_default image">
          <img id="u51_img" class="img " src="images/输入框搜索框软键盘/u51.png"/>
        </div>

        <!-- Unnamed (矩形) -->
        <div id="u52" class="ax_default box_21">
          <div id="u52_div" class=""></div>
          <div id="u52_text" class="text ">
            <p><span>获取焦点不为空状态</span></p>
          </div>
        </div>

        <!-- Unnamed (矩形) -->
        <div id="u53" class="ax_default box_21">
          <div id="u53_div" class=""></div>
          <div id="u53_text" class="text ">
            <p><span>失去焦点空状态</span></p>
          </div>
        </div>

        <!-- Unnamed (矩形) -->
        <div id="u54" class="ax_default box_21">
          <div id="u54_div" class=""></div>
          <div id="u54_text" class="text ">
            <p><span>失去焦点不为空状态</span></p>
          </div>
        </div>

        <!-- Unnamed (图片) -->
        <div id="u55" class="ax_default image">
          <img id="u55_img" class="img " src="images/输入框搜索框软键盘/u55.png"/>
        </div>

        <!-- Unnamed (图片) -->
        <div id="u56" class="ax_default image">
          <img id="u56_img" class="img " src="images/输入框搜索框软键盘/u56.png"/>
        </div>

        <!-- Unnamed (图片) -->
        <div id="u57" class="ax_default image">
          <img id="u57_img" class="img " src="images/输入框搜索框软键盘/u57.png"/>
        </div>

        <!-- Unnamed (矩形) -->
        <div id="u58" class="ax_default box_21">
          <div id="u58_div" class=""></div>
        </div>

        <!-- Unnamed (矩形) -->
        <div id="u59" class="ax_default box_21">
          <div id="u59_div" class=""></div>
        </div>

        <!-- Unnamed (矩形) -->
        <div id="u60" class="ax_default box_21">
          <div id="u60_div" class=""></div>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u61" class="ax_default _文本段落">
        <div id="u61_div" class=""></div>
        <div id="u61_text" class="text ">
          <p><span>【搜索框】</span></p><p><span>&#149; 初始显示搜索图标</span></p><p><span>&#149; 点击搜索图标，展开搜索对话框。搜索输入框默认获取焦点，显示软键盘</span></p><p><span>&#149; 输入框有字符时（无论是否获取焦点），显示“清空”按钮。点击“清空”，当前输入框字符清空，输入框获取焦点</span></p><p><span>&#149; 输入框字符超过输入框长度时，以最右为基准显示，左侧超出字符隐藏</span></p><p><span>&#149; 点击软键盘上的return，输入框失去焦点。失去焦点时关闭软键盘。执行搜索，显示搜索结果。搜索条件为空时，显示全部结果。</span></p><p><span>&#149; 输入框无聚焦时，点击输入框区域，输入框获取焦点。如果字符，焦点鼠标在字符后。获取焦点时，显示软键盘</span></p>
        </div>
      </div>

      <!-- Unnamed (图片) -->
      <div id="u62" class="ax_default image">
        <img id="u62_img" class="img " src="images/输入框搜索框软键盘/u62.png"/>
      </div>

      <!-- Unnamed (图片) -->
      <div id="u63" class="ax_default image">
        <img id="u63_img" class="img " src="images/输入框搜索框软键盘/u63.png"/>
      </div>
    </div>
  </body>
</html>
